<template>
    <div>
        pinia: {{Test.current}} -- {{Test.name}}
        <button @click="change">change</button>
        解构后{{current}}
        <hr>
        <User />

        <hr>
        <button @click="changeBase">changeB</button>
    </div>
</template>

<script setup lang="ts">
import User from './user.vue'
/*
    pinia的使用， 代替vuex, 在store里看具体
*/
import { storeToRefs } from 'pinia'
import { useTestStore, useStore } from '../../store'
const Test = useTestStore()
const Base = useStore()

// 解构后不具有响应式
// const {current, name} = Test
// 变成响应式的，需要从pinia引入torefs
const {current,name} = storeToRefs(Test)

const change = () => {
    // Test.current++                  // 第一种方式：可以直接这样修改值，vuex中需要提交mutations
    // Test.$patch({                      // 第二种方式：实例上的$patch
    //     current: 100,
    //     name: 'lisi'
    // })
    // Test.$patch((state) => {                      // 第三种方式：实例上的$patch使用工厂函数
    //     state.current = 999
    //     state.name = 'zhaoliu'
    // })
    // Test.$state = {                      // 第四种方式：$state 需要修改整个对象, 不常用
    //     current: 999,
    //     name: 'zhaoliu'
    // }
    // Test.setCurrent()                             // 第五种方式：直接调用actions里的方法
    // Test.setCurrent(555)                             // 如果方法需要接受参数，这边必须传参

    current.value++                   // 这种解构出来的是一个ref，所以需要获取value
}

const changeBase = () => {
    Base.setCurrent(654)
}
</script>

<style scoped>

</style>